<template>
  <div class="extract">
    <HeaderTop :title="`提现`" :routeFuc="withdrawHistory" :hasright="true" :rightText="`提现记录`"></HeaderTop>
    <van-notice-bar
        v-if="chosingTitle===2"
        left-icon="volume-o"
        text="取款金额最低为100元，可使用 谷歌验证器/手机号码 / 邮箱 收取验证码 (若未绑定手机和邮箱，请点击这里),若是邮箱注意查看垃圾信箱。"
        @click="goSafeCenter"
    />
    <div class="extract-content-title">
      <!-- <div class="extract-content-title-list" :class="chosingTitle===1?'title-chosing':''" @click="switchTitle(1)">银行卡取款</div> -->
      <div class="extract-content-title-list" :class="chosingTitle===2?'title-chosing':''" @click="switchTitle(2)">
        虚拟币取款
      </div>
      <!-- <div class="extract-content-title-list" :class="chosingTitle===3?'title-chosing':''" @click="switchTitle(3)">会员互转</div> -->
      <div class="extract-content-title-list" :class="chosingTitle===4?'title-chosing':''" @click="switchTitle(4)">
        佣金取款
      </div>
    </div>
    <!-- 银行卡取款 -->
    <!-- <div class="extract-content" v-if="chosingTitle===1">
      <div class="my-data-list">
        <div class="my-data-list-left">可取款金额</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{userInfo.available}}</div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">取款姓名</div>
        <div class="my-data-list-right">
                    <input type="text" class="my-data-list-input" placeholder="请输入取款姓名" v-model='realName'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">银行名称</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="showBankPicker = true">
                        {{BankName}}
                        <van-icon class="click-icon" name="arrow-down"/>
                    </div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">省份</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="showProvincePicker = true">
                        {{province}}
                        <van-icon class="click-icon" name="arrow-down"/>
                    </div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">城市</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="showCityPopup">
                        {{city}}
                        <van-icon class="click-icon" name="arrow-down"/>
                    </div>
        </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">开户地址</div>
        <div class="my-data-list-right">
                    <input type="text" class="my-data-list-input" placeholder="请输入开户地址" v-model='bankAdress'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">银行卡号</div>
        <div class="my-data-list-right">
                    <input type="text" maxlength="19" oninput="value=value.replace(/[^\d]/g,'')" class="my-data-list-input" placeholder="请输入银行卡号" v-model="cardNumber">
        </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">确认卡号</div>
        <div class="my-data-list-right">
                    <input type="text" maxlength="19" oninput="value=value.replace(/[^\d]/g,'')" class="my-data-list-input" placeholder="请再次输入银行卡号" v-model="cardNumberCfm">
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">取款金额</div>
                <div class="my-data-list-right">
                    <input type="number" maxlength="10" oninput='if(value.length>10)value=value.slice(0,10)' class="my-data-list-input" placeholder="请输入取款金额" v-model='withdrawNum'>
                </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">验证方式</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="checkVerifyStatus()">
                        {{verifyMode}}
                        <van-icon class="click-icon" name="arrow-down"/>
                    </div>
        </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">验证码</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">
                        <input type="text" maxlength="6" class="input-code" placeholder="请输入验证码" v-model="bankVcode">
                        <van-button v-if='!isSending' class="code-btn" round color='#00459E' size="small" @click="getCode()" :disabled='canSend'>获取验证码</van-button>
                        <van-button v-if='isSending' class="code-btn" round color='#00459E' size="small">{{count}}s</van-button>
                    </div>
        </div>
      </div>
            <van-button id="btnCover" color="#00459E" @click="bankSub()" block round>提交</van-button>
    </div> -->
    <!-- 虚拟币取款 -->
    <div class="extract-content" v-if="chosingTitle===2">
      <div class="my-data-list">
        <div class="my-data-list-left">可取款金额</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{ virtualInfo.available }}</div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">虚拟币账号类型</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="showVirtualPicker = true">
            {{ virtualName }}
            <van-icon class="click-icon" name="arrow-down"/>
          </div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">虚拟币账号</div>
        <div class="my-data-list-right">
          <!-- <div class="my-data-list-right-left">{{virtualInfo.virtualCard}}</div> -->
          <input type="text" class="my-data-list-input" placeholder="请输入虚拟币账号" v-model='virtualAcc'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">确认虚拟币账号</div>
        <div class="my-data-list-right">
          <!-- <div class="my-data-list-right-left">{{virtualInfo.virtualCard}}</div> -->
          <input type="text" class="my-data-list-input" placeholder="请再次输入虚拟币账号" v-model='virtualAccCfm'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">取款金额</div>
        <div class="my-data-list-right">
          <input type="number" maxlength="10" oninput='if(value.length>10)value=value.slice(0,10)'
                 class="my-data-list-input" placeholder="请输入取款金额" v-model='withdrawNum2'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">备注信息</div>
        <div class="my-data-list-right">
          <input type="text" maxlength="100" class="my-data-list-input" placeholder="请输入备注信息"
                 v-model='withdrawMark'>
        </div>
        <!-- <van-field class="my-data-list-right my-data-list-right2" type="text" v-model="withdrawMark" placeholder="请输入备注信息" input-align="right"/> -->
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">验证方式</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="checkVerifyStatus()">
            {{ verifyMode2 }}
            <van-icon class="click-icon" name="arrow-down"/>
          </div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">验证码</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">
            <input type="text" maxlength="6" class="input-code" placeholder="请输入验证码" v-model="virtualVcode"
                   :style="{textAlign:validType2 !== '2'?'center':'right'}">
            <div v-show="validType2 !== '2'">
              <van-button v-if='!isSending2' class="code-btn" round color='#00459E' size="small"
                          @click="getCodeVirtual()" :disabled='canSend2'>获取验证码
              </van-button>
              <van-button v-if='isSending2' class="code-btn" round color='#00459E' size="small">{{ count2 }}s
              </van-button>
            </div>
          </div>
        </div>
      </div>
      <!-- <van-button class="sub-withdraw" type="info" color="#00459E" block @click="subVirtualWithdraw">确认提款</van-button> -->
      <van-button id="btnCover" color="#00459E" @click="subVirtualWithdraw" block round>提交</van-button>
    </div>
    <!-- 会员互转 -->
    <!-- <div class="extract-content" v-if="chosingTitle===3">
      <div class="my-data-list">
        <div class="my-data-list-left">可转账金额</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{toMemberData.agentPayCash}}</div>
        </div>
      </div>
      <div class="my-data-list">
                <div class="my-data-list-left">会员账号</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{toMemberData.memberLoginName}}</div>
        </div>
      </div>
      <div class="my-data-list">
                <div class="my-data-list-left">会员姓名</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{toMemberData.memberName}}</div>
        </div>
      </div>
      <div class="my-data-list">
                <div class="my-data-list-left">会员账号余额</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{toMemberData.memberMoney}}</div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">转账金额</div>
                <div class="my-data-list-right">
                    <input type="number" maxlength="10" oninput='if(value.length>10)value=value.slice(0,10)' class="my-data-list-input" placeholder="请输入转账金额" v-model='toMemberNum'>
                </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">验证方式</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left" @click="checkVerifyStatus()">
                        {{verifyMember}}
                        <van-icon class="click-icon" name="arrow-down"/>
                    </div>
        </div>
      </div>
            <div class="my-data-list">
        <div class="my-data-list-left">验证码</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">
                        <input type="text" maxlength="6" class="input-code" placeholder="请输入验证码" v-model="memberVcode">
                        <van-button v-if='!memberIsSending' class="code-btn" round color='#00459E' size="small" @click="getCodeMember()" :disabled='memberCanSend'>获取验证码</van-button>
                        <van-button v-if='memberIsSending' class="code-btn" round color='#00459E' size="small">{{memberCount}}s</van-button>
                    </div>
        </div>
      </div>
            <van-button id="btnCover" color="#00459E" @click="subToMember()" block round>提交</van-button>
    </div> -->
    <!-- 佣金取款 -->
    <div class="extract-content" v-if="chosingTitle===4">
      <div class="my-data-list">
        <div class="my-data-list-left">可取款金额</div>
        <div class="my-data-list-right">
          <div class="my-data-list-right-left">{{ virtualInfo.available }}</div>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">取款金额</div>
        <div class="my-data-list-right">
          <input type="number" maxlength="10" oninput='if(value.length>10)value=value.slice(0,10)'
                 class="my-data-list-input" placeholder="请输入取款金额" v-model='withdrawNum3'>
        </div>
      </div>
      <div class="my-data-list">
        <div class="my-data-list-left">动态验证码</div>
        <div class="my-data-list-right">
          <input type="text" maxlength="8" class="my-data-list-input" placeholder="请输入动态验证码"
                 v-model='commissionCode'>
        </div>
      </div>
      <!-- <van-button class="sub-withdraw" type="info" color="#00459E" block @click="subVirtualWithdraw">确认提款</van-button> -->
      <van-button id="btnCover" color="#00459E" @click="subCommissionWithdraw" block round>提交</van-button>
    </div>

    <van-popup v-model="showBankPicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="bankListShow" @cancel="showBankPicker=false"
                  @confirm="bankPickCfm"/>
    </van-popup>
    <van-popup v-model="showProvincePicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="provinceList" @cancel="showProvincePicker=false"
                  @confirm="provincePickCfm"/>
    </van-popup>
    <van-popup v-model="showCityPicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="cityList" @cancel="showCityPicker=false"
                  @confirm="cityPickCfm"/>
    </van-popup>
    <van-popup v-model="showVerifyPicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="verifyList" @cancel="showVerifyPicker=false"
                  @confirm="verifyPickCfm"/>
    </van-popup>
    <van-popup v-model="showVirtualPicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="virtualListShow" @cancel="showVirtualPicker=false"
                  @confirm="virtualPickCfm"/>
    </van-popup>
    <van-popup v-model="showVerifyPicker2" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="verifyList" @cancel="showVerifyPicker2=false"
                  @confirm="verifyPickCfm2"/>
    </van-popup>
    <van-popup v-model="showMemberPicker" round position="bottom">
      <van-picker show-toolbar swipe-duration='500' :columns="memberList" @cancel="showMemberPicker=false"
                  @confirm="memberPickCfm"/>
    </van-popup>
    <PayPwdInput :visible="isVisible" @error="isShowError" @close="isVisible = false" @complete="handleComplete"/>
    <van-loading id='pageLoading' v-if='isLoading' type="spinner" size="40" color="#1989fa"/>
  </div>
</template>
<script>
import {Dialog, NoticeBar} from "vant"
import HeaderTop from '../../components/top/top'
import addr from '../../assets/address.json'
import {checkPayPassword} from '../../common/check'
import PayPwdInput from "../../components/passwordInput/PayPwdInput.vue";

export default {
  name: 'extract',
  components: {
    HeaderTop,
    PayPwdInput
  },
  data() {
    return {
      submitMode: 0,
      isShowError: false,
      isVisible: false,
      chosingTitle: 0,
      userInfo: {},
      withdrawNum: '',
      withdrawNum2: '',
      withdrawNum3: '',
      virtualCoinType: '',
      virtualCoinAccount: '',
      withdrawMark: '',
      virtualInfo: {},
      realName: '',
      BankName: '请选择',
      virtualName: '请选择',
      province: '请选择省份',
      city: '请选择城市',
      bankAdress: '',
      cardNumber: '',
      cardNumberCfm: '',
      verifyMode: '请选择验证方式',
      verifyMode2: '请选择验证方式',
      verifyMember: '请选择验证方式',
      showBankPicker: false,
      showVirtualPicker: false,
      showProvincePicker: false,
      showCityPicker: false,
      showVerifyPicker: false,
      showVerifyPicker2: false,
      showMemberPicker: false,
      bankList: [],
      virtualList: [],
      bankListShow: [],
      virtualListShow: [],
      allData: addr,
      provinceList: [],
      cityList: [],
      verifyList: [],
      provinceIndex: -1,
      isSending: false,
      isSending2: false,
      memberIsSending: false,
      count: '',
      count2: '',
      memberCount: '',
      validType: '',
      validType2: '',
      canSend: true,
      canSend2: true,
      isLoading: false,
      sysBankId: 0,
      sysVirtualId: 0,
      bankVcode: '',
      virtualVcode: '',
      virtualAcc: '',
      virtualAccCfm: '',
      virtualChain: '',
      toMemberData: {},
      toMemberNum: '',
      memberList: [],
      memberCanSend: true,
      memberVcode: '',
      memberValidType: null,
      commissionCode: '',

      //
      hasPhone: false,
      hasEmail: false,
      hasGoogle: false
    }
  },

  beforeRouteLeave(to, from, next) {
    clearTimeout(this.timer2)
    this.timer2 = null
    this.$destroy(true)
    next()
  },
  mounted() {
    checkPayPassword(this.$router)
    this.getInfo()
    this.initData()
    this.switchTitle(2)
  },
  methods: {
    handleComplete(code) {
      this.isLoading = true
      this.ServerAPI.postAPI(this.API.validatePayPassword, {
        password:code
      }, (success, data) => {
        if(success){
          if (data.code !== '1'){
            this.isLoading = false
            this.isShowError = true
            this.$toastTop(data.info, 3);
            return
          }
          this.isVisible = false
          if (this.submitMode === 1) {
            let params = {
              // sysVirtualId: this.sysVirtualId,
              virtualChain: this.virtualChain,
              validType: this.validType2,
              code: this.virtualVcode,
              virtualCard: this.virtualAcc,
              cash: this.withdrawNum2,
              info: this.withdrawMark,
            }
            this.ServerAPI.postAPI(this.API.subVirtualWithdraw, params, (success, data) => {
              this.isLoading = false
              if (success) {
                if (data.code === '0000') {
                  Dialog.alert({
                    message: data.info,
                    confirmButtonColor: '#00459E'
                  }).then(() => {
                    // on close
                    this.$router.push('/my')
                  });
                } else {
                  this.$toastTop(data.info, 3);
                }
              } else {
                this.$toastTop('网络慢，请稍后再试', 2);
              }
            })
          } else if (this.submitMode === 2) {
            let params = {
              validType: 2,
              code: this.commissionCode,
              cash: this.withdrawNum3,
            }
            this.ServerAPI.postAPI(this.API.subCommissionWithdraw, params, (success, data) => {
              this.isLoading = false
              if (success) {
                if (data.code === '0000') {
                  Dialog.alert({
                    message: data.info,
                    confirmButtonColor: '#00459E'
                  }).then(() => {
                    // on close
                    this.$router.push('/my')
                  });
                } else {
                  this.$toastTop(data.info, 3)
                }
              } else {
                this.$toastTop('网络慢，请稍后再试', 2);
              }
            })
          }
        }
      })


    },
    goSafeCenter() {
      this.$router.push('/safeCenter')
    },
    initData() {
      this.allData.forEach(item => {
        this.provinceList.push(item.name)
      })
    },
    bankPickCfm(value, index) {
      this.BankName = value
      this.sysBankId = this.bankList[index].id
      this.showBankPicker = false
    },
    provincePickCfm(value, index) {
      this.province = value
      if (this.provinceIndex !== index) {
        this.provinceIndex = index
        this.allData[index].cities.forEach(item => {
          this.cityList.push(item.name)
          this.city = '请选择城市'
        })
      }
      this.showProvincePicker = false
    },
    showCityPopup() {
      if (this.province === '请选择省份') {
        this.$toastTop('请先选择省份', 3);
        return false
      }
      this.showCityPicker = true
    },
    cityPickCfm(value, index) {
      this.city = value
      this.showCityPicker = false
    },
    checkVerifyStatus() {
      if (this.hasPhone === false && this.hasEmail === false) {
        Dialog.confirm({
          message: '请先绑定手机或邮箱',
          confirmButtonText: '前往',
          confirmButtonColor: '#00459E',
        })
            .then(() => {
              // on confirm
              this.$router.push('/safeCenter')
            })
            .catch(() => {
              // on cancel
            })
      } else {
        if (this.chosingTitle === 1) {
          this.showVerifyPicker = true
        } else if (this.chosingTitle === 2) {
          this.showVerifyPicker2 = true
        } else {
          this.showMemberPicker = true
        }

      }
    },
    verifyPickCfm(value, index) {
      this.verifyMode = value.text
      this.showVerifyPicker = false
      this.canSend = false
      if (index === 0) {
        this.validType = '0'
      } else if (index === 1) {
        this.validType = '1'
      }
    },
    withdrawHistory() {
      this.$router.push('/extractHistory')
    },

    getInfo() {
      this.userInfo = {}
      this.bankList = this.bankListShow = []
      this.isLoading = true
      this.ServerAPI.postAPI(this.API.withdrawInfo, '', (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.bankList = data.data.sysBankList
            this.userInfo = data.data
            // this.realName = data.data.realName
            this.bankList.forEach(item => {
              this.bankListShow.push(item.bankName)
            })
            if (!!this.userInfo.phone === false || this.userInfo.phone === '' || this.userInfo.phone === null) {
              this.verifyList[0] = {text: '尚未绑定手机: ', disabled: true}
              this.hasPhone = false
            } else {
              this.verifyList[0] = {text: '通过手机验证: ' + this.userInfo.phone}
              this.hasPhone = true
            }
            if (!!this.userInfo.email === false || this.userInfo.email === '' || this.userInfo.email === null) {
              this.verifyList[1] = {text: '尚未绑定邮箱: ', disabled: true}
              this.hasEmail = false
            } else {
              this.verifyList[1] = {text: '通过邮箱验证: ' + this.userInfo.email}
              this.hasEmail = true
            }
            if (this.hasPhone === false && this.hasEmail === false) {
              this.verifyMode = '请先绑定手机或邮箱'
            }
          }
        }
      })
    },
    getCode() {
      this.isLoading = true
      this.isSending = true
      let params = {
        validType: this.validType
      }
      this.ServerAPI.postAPI(this.API.getCode, params, (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.$toastTop('发送成功', 1)
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT
              // this.isSending = true
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--
                } else {
                  this.isSending = false
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          } else {
            this.$toastTop(data.info, 3)
            this.isSending = false
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2)
          this.isSending = false
        }
      })
    },
    bankSub() {
      if (this.realName.trim().length === 0) {
        this.$toastTop('请输入取款姓名', 3)
        return false
      }
      if (this.BankName === '请选择') {
        this.$toastTop('请选择银行', 3)
        return false
      }
      if (this.province === '请选择省份') {
        this.$toastTop('请选择省份', 3)
        return false
      }
      if (this.city === '请选择城市') {
        this.$toastTop('请选择城市', 3)
        return false
      }
      if (this.bankAdress.trim().length === 0) {
        this.$toastTop('请输入开户地址', 3)
        return false
      }
      if (this.cardNumber.trim().length === 0) {
        this.$toastTop('请输入银行卡号', 3)
        return false
      }
      var reg = new RegExp("^[0-9]*[1-9][0-9]*$");
      if (!reg.test(this.cardNumber) || this.cardNumber.length < 12) {
        this.$toastTop('银行卡号格式不正确', 3)
        return false;
      }
      if (this.cardNumber !== this.cardNumberCfm) {
        this.$toastTop('卡号两次输入不一致', 3)
        return false
      }
      if (this.withdrawNum.trim().length === 0) {
        this.$toastTop('请输入取款金额', 3)
        return false
      }
      if (this.userInfo.available === 0) {
        this.$toastTop('您的余额为0', 3)
        return false
      }
      if (this.withdrawNum <= 0 || this.withdrawNum > this.userInfo.available) {
        this.$toastTop('请输入 0 - ' + this.userInfo.available + ' 之间的有效金额', 3)
        return false
      }
      if (this.verifyMode === '请选择验证方式') {
        this.$toastTop('请选择验证方式', 3)
        return false
      }
      if (this.bankVcode.trim().length === 0) {
        this.$toastTop('请输入验证码', 3)
        return false
      }
      this.isLoading = true
      let params = {
        sysBankId: this.sysBankId,
        province: this.province,
        city: this.city,
        bankAdress: this.bankAdress,
        cardNumber: this.cardNumber,
        realName: this.realName,
        cash: this.withdrawNum,
        validType: this.validType,
        code: this.bankVcode,
      }
      this.ServerAPI.postAPI(this.API.subBankWithdraw, params, (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            Dialog.alert({
              message: data.info,
              confirmButtonColor: '#00459E'
            }).then(() => {
              // on close
              this.$router.push('/my')
            });
          } else {
            this.$toastTop(data.info, 3)
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2)
        }
      })
    },
    virtualPickCfm(value, index) {
      this.virtualChain = value
      this.virtualName = 'USDT-' + value
      this.sysVirtualId = this.virtualList[index].id
      this.showVirtualPicker = false
    },
    getVirtualInfo() {
      this.virtualInfo = {}
      // this.virtualList = this.virtualListShow = []
      this.virtualList = [
        // {name:'ERC20'},
        {name: 'TRC20'}
      ]
      this.virtualListShow = []
      this.virtualList.forEach(item => {
        this.virtualListShow.push(item.name)
      })
      this.isLoading = true
      this.ServerAPI.postAPI(this.API.withdrawVirtualInfo, '', (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.virtualInfo = data.data
            // this.virtualList = data.data.sysVirtualList
            if (!!this.virtualInfo.phone === false || this.virtualInfo.phone === '' || this.virtualInfo.phone === null) {
              this.verifyList[0] = {text: '尚未绑定手机: ', disabled: true}
              this.hasPhone = false
            } else {
              this.verifyList[0] = {text: '通过手机验证: ' + this.virtualInfo.phone}
              this.hasPhone = true
            }
            if (!!this.virtualInfo.email === false || this.virtualInfo.email === '' || this.virtualInfo.email === null) {
              this.verifyList[1] = {text: '尚未绑定邮箱: ', disabled: true}
              this.hasEmail = false
            } else {
              this.verifyList[1] = {text: '通过邮箱验证: ' + this.virtualInfo.email}
              this.hasEmail = true
            }
            if (!!this.virtualInfo.googleKey === false || this.virtualInfo.googleKey === '' || this.virtualInfo.googleKey === null) {
              this.verifyList[2] = {text: '尚未绑定谷歌验证: ', disabled: true}
              this.hasGoogle = false
            } else {
              this.verifyList[2] = {text: '谷歌验证器'}
              this.hasGoogle = true
            }
            if (this.hasPhone === false && this.hasEmail === false && this.hasGoogle === false) {
              this.verifyMode2 = '请先绑定手机或邮箱或谷歌验证'
            }
          }
        }
      })
    },
    verifyPickCfm2(value, index) {
      this.verifyMode2 = value.text
      this.showVerifyPicker2 = false
      this.canSend2 = false
      if (index === 0) {
        this.validType2 = '0'
      } else if (index === 1) {
        this.validType2 = '1'
      } else if (index === 2) {
        this.validType2 = '2'
      }
    },
    switchTitle(value) {
      if (this.chosingTitle !== value) {
        this.chosingTitle = value
        if (this.chosingTitle === 1) {
          // this.getInfo()
        } else if (this.chosingTitle === 2) {
          this.getVirtualInfo()
        } else if (this.chosingTitle === 3) {
          this.getCashToMemberInfo()
        }
      }
    },
    getCodeVirtual() {
      this.isLoading = true
      this.isSending2 = true
      let params = {
        validType: this.validType2
      }
      this.ServerAPI.postAPI(this.API.getCode, params, (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.$toastTop('发送成功', 1)
            const TIME_COUNT = 60
            if (!this.timer2) {
              this.count2 = TIME_COUNT
              this.timer2 = setInterval(() => {
                if (this.count2 > 0 && this.count2 <= TIME_COUNT) {
                  this.count2--
                } else {
                  this.isSending2 = false
                  clearInterval(this.timer2)
                  this.timer2 = null
                }
              }, 1000)
            }
          } else {
            this.$toastTop(data.info, 3)
            this.isSending2 = false
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2)
          this.isSending2 = false
        }
      })
    },
    subVirtualWithdraw() {
      if (this.virtualVcode.trim().length === 0) {
        this.$toastTop('请输入验证码', 3)
        return false
      }
      if (this.virtualName === '请选择') {
        this.$toastTop('请选择虚拟币账号类型', 3)
        return false
      }
      if (this.virtualAcc !== this.virtualAccCfm) {
        this.$toastTop('账号两次输入不一致', 3)
        return false
      }
      if (this.withdrawNum2.trim().length === 0) {
        this.$toastTop('请输入取款金额', 3)
        return false
      }
      if (this.withdrawMark.trim().length === 0) {
        this.$toastTop('请输入备注信息', 3)
        return false
      }
      if (this.virtualInfo.available === 0) {
        this.$toastTop('您的余额为0', 3)
        return false
      }
      if (this.withdrawNum2 <= 0 || this.withdrawNum2 > this.virtualInfo.available) {
        this.$toastTop('请输入 0 - ' + this.virtualInfo.available + ' 之间的有效金额', 3)
        return false
      }
      if (this.verifyMode2 === '请选择验证方式') {
        this.$toastTop('请选择验证方式', 3)
        return false
      }
      if(!checkPayPassword(this.$router)) return
      this.isVisible = true
      this.submitMode = 1

    },
    getCashToMemberInfo() {
      this.ServerAPI.postAPI(this.API.getCashToMemberInfo, '', (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.toMemberData = data.data
            if (!!data.data.phone === true) {
              this.memberList[0] = {text: '通过手机验证: ' + data.data.phone}
              this.hasphone = true
            } else {
              this.memberList[0] = {text: '尚未绑定手机: ', disabled: true}
              this.hasphone = false
            }
            if (!!data.data.mail === true) {
              this.memberList[1] = {text: '通过邮箱验证: ' + data.data.email}
              this.hasEmail = true
            } else {
              this.memberList[1] = {text: '尚未绑定邮箱: ', disabled: true}
              this.hasEmail = false
            }
          } else {
            this.$toastTop(data.info, 3);
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2);
        }
      })
    },
    memberPickCfm(value, index) {
      this.verifyMember = value.text
      this.showMemberPicker = false
      this.memberCanSend = false
      if (index === 0) {
        this.memberValidType = '0'
      } else if (index === 1) {
        this.memberValidType = '1'
      }
    },
    getCodeMember() {
      this.isLoading = true
      this.memberIsSending = true
      let params = {
        validType: this.memberValidType
      }
      // this.ServerAPI.postAPI(this.API.memberSendsms, params, (success,data)=>{
      this.ServerAPI.postAPI(this.API.getCode, params, (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            this.$toastTop('发送成功', 1);
            const TIME_COUNT = 60
            if (!this.timer2) {
              this.memberCount = TIME_COUNT
              this.timer2 = setInterval(() => {
                if (this.memberCount > 0 && this.memberCount <= TIME_COUNT) {
                  this.memberCount--
                } else {
                  this.memberIsSending = false
                  clearInterval(this.timer2)
                  this.timer2 = null
                }
              }, 1000)
            }
          } else {
            this.$toastTop(data.info, 3);
            this.memberIsSending = false
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2);
          this.memberIsSending = false
        }
      })
    },
    subToMember() {
      if (this.memberVcode.trim().length === 0) {
        this.$toastTop('请输入验证码', 3);
        return false
      }
      if (this.toMemberNum.trim().length === 0) {
        this.$toastTop('请输入转账金额', 3);
        return false
      }
      if (this.toMemberData.agentPayCash === 0) {
        this.$toastTop('您的余额为0', 3);
        return false
      }
      if (this.toMemberNum <= 0 || this.toMemberNum > this.toMemberData.agentPayCash) {
        this.$toastTop('请输入 0 - ' + this.userInfo.available + ' 之间的有效金额', 3);
        return false
      }
      if (this.verifyMember === '请选择验证方式') {
        this.$toastTop('请选择验证方式', 3);
        return false
      }
      this.isLoading = true
      let params = {
        validType: this.memberValidType,
        vcode: this.memberVcode,
        cash: this.toMemberNum,
      }
      this.ServerAPI.postAPI(this.API.cashToMemberSub, params, (success, data) => {
        this.isLoading = false
        if (success) {
          if (data.code === '0000') {
            Dialog.alert({
              message: data.info,
              confirmButtonColor: '#00459E'
            }).then(() => {
              // on close
              this.$router.push('/my')
            });
          } else {
            this.$toastTop(data.info, 3)
          }
        } else {
          this.$toastTop('网络慢，请稍后再试', 2);
        }
      })
    },
    subCommissionWithdraw() {
      if (this.isEmpty(this.withdrawNum3) === true) {
        this.$toastTop('请输入取款金额', 3)
        return false
      }
      if (this.isEmpty(this.commissionCode) === true) {
        this.$toastTop('请输入动态验证码', 3)
        return false
      }
      if(!checkPayPassword(this.$router)) return
      this.isVisible = true
      this.submitMode = 2

    },
  }
}
</script>
<style lang="scss" scoped>
.extract {
  .extract-content-title {
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: .3rem auto 0;
    text-align: center;

    .extract-content-title-list {
      width: 50%;
      color: rgb(114, 114, 114);
      height: .6rem;
    }

    .title-chosing {
      font-weight: bold;
      color: rgb(0, 71, 157);
      border-bottom: rgb(0, 71, 157) 5px solid;
    }
  }

  .extract-content {
    border-top: rgb(210, 210, 210) 1px solid;
    padding: 0 .2rem 1rem;

    .my-data-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1rem;
      border-bottom: 1px solid #ececec;
      padding: 0 .2rem;
      color: rgb(46, 46, 46);
      font-size: .28rem;

      .my-data-list-right {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .my-data-list-right-left {
          flex: .6rem;
          // color: #191D2A;
          margin-right: .2rem;
          display: flex;
          align-items: center;

          img {
            width: .8rem;
            height: .8rem;
          }

          .click-icon {
            margin-left: .15rem;
          }

          .adress-line1 {
            width: 3.5rem;
            height: 50%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .adress-current {
              width: .6rem;
              height: .35rem;
              text-align: center;
              line-height: .35rem;
              font-size: .24rem;
              color: #FFFFFF;
              background: #D6353F;
              border-radius: .05rem;
            }
          }

          .input-code {
            border: none;
            outline: none;
            text-align: center;
          }

          .code-btn {
            width: 1.8rem;
          }
        }

        .my-data-list-input {
          width: 3.5rem;
          border: none;
          outline: none;
          text-align: right;
          margin-right: .2rem;
        }
      }

      .my-data-list-right2 {
        width: 68%;
      }

      .my-data-list-right3 {
        width: 68%;
        text-align: right;

        .my-data-list-right-left {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .sub-withdraw {
      width: 80%;
      margin: 1rem auto 0;
      border-radius: .15rem;
    }
  }
}
</style>
